<template>
    <!-- 返回 -->
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="back" />

    <!-- 订单列表 -->

    <van-tabs v-model:active="active" @change="SwitchOrder">

        <van-tab v-for="(item,index) in statuslist" :title="item.title">

            <van-swipe-cell v-for="(order,key) in orderList">
                <van-card :desc="'商品名称：'+order.product.name" :price="order.total" :title="'订单号：'+order.code"
                    :thumb="order.product.cover_cdn">
                    <!-- 插槽 -->
                    <template #num>
                        <!-- 状态 -->
                        <van-tag plain type="danger">{{order.status_text}}</van-tag>
                    </template>

                    <!-- 下单时间 -->
                    <template #tags>
                        下单时间：{{order.createtime}}
                    </template>

                    <template #footer>
                        <van-button size="mini" @click="ToInfo(order.id)">订单详情</van-button>

                        <van-button type="danger" v-if="order.status < 4" size="mini" @click="ToBack(order.id)">申请退货
                        </van-button>

                        <van-button type="success" v-if="order.status ==2" size="mini" @click="ToConfirm(order.id)">确认收货
                        </van-button>

                        <van-button type="warning" v-if="order.status ==3" size="mini" @click="ToComment(order.id)">待评价
                        </van-button>

                        <van-button type="warning" v-if="order.status > 3" size="mini" @click="ToComment(order.id)">查看评价
                        </van-button>

                        <van-button type="primary" v-if="order.status >=2" size="mini" @click="ToExpress(order.id)">查看物流
                        </van-button>
                    </template>
                </van-card>
            </van-swipe-cell>
        </van-tab>
    </van-tabs>

</template>

<script>
    export default {
        name: 'OrderIndex',
        created() {
            this.OrderData()
        },

        data() {
            return {
                orderList: [],
                LoginUser: this.$cookies.get('LoginUser'),
                active: 0, //默认选中的下标
                newtimes: 0,
                statuslist: [{
                        status: 0,
                        title: '全部'
                    },
                    {
                        status: 1,
                        title: '待发货'
                    },
                    {
                        status: 2,
                        title: '待收货'
                    },
                    {
                        status: 3,
                        title: '待评价'
                    },
                    {
                        status: 4,
                        title: '已评价'
                    },
                    {
                        status: -1,
                        title: '已退货'
                    },
                ],
            }
        },

        methods: {
            back() {
                this.$router.go(-1)
            },
            // 切换状态时，重新请求页面数据
            SwitchOrder(name, title) {

                // console.log(name,title);
                this.active = name
                this.OrderData()

            },
            //点击进入详情页面
            ToInfo(orderid) {
                //   console.log(orderid);
                this.$router.push({
                    path: '/user/order/info',
                    query: {
                        orderid: orderid
                    }
                })
            },


            async ToConfirm(orderid) {
                var timestamp =parseInt( new Date().getTime()/1000);
                var data = {
                    userid: this.LoginUser.id,
                    orderid: orderid,
                    newtimes: timestamp
                }
                this.$dialog.confirm({
                    message: '是否确认收获'
                }).then(async () => {
      
                var result = await this.$api.OrderConfirm(data)
              
                    if (result.code == 0) {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })

                    } else {
                        this.$notify({
                            type: 'success',
                            message: result.msg,
                            duration: 1000,
                        })
                    }
                    //重新刷新页面
                    this.OrderData()
                }).catch(() => {})
            },

            async OrderData() {
                var data = {
                    userid: this.LoginUser.id,
                    status: this.active
                }
                var result = await this.$api.OrderIndex(data)

                this.orderList = result.data
                // console.log(this.orderList);
            },

            // 物流信息
            ToExpress(orderid) {
                this.$router.push({
                    path: '/user/order/express',
                    query: {
                        orderid: orderid
                    }
                })
            },

            // 待评价
            ToComment(orderid) {
                // console.log(orderid);
                this.$router.push({
                    path: '/user/order/comment', //组件
                    query: {
                        orderid: orderid
                    }
                })
            },

            // 申请退款
            async ToBack(orderid) {
                var timestamp =parseInt(new Date().getTime()/1000);
            
                var data = {
                    orderid: orderid,
                    userid: this.LoginUser.id,
                    newtimes:this.timestamp
                }
                var result = await this.$api.OrderBack(data)


                if (result.code == 0) {
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                } else {
                    this.$router.push({
                        path: '/user/order/back',
                        query: {
                            orderid: orderid
                        }
                    })

                }

            }
        }
    }
</script>